<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8">
    <title>派发事件</title>
    <style type="text/css">
        .file-upload-wrapper {
            display: flex ;
            border: 1px solid blue ;
            height: 50px ;
            width: 500px ;
        }
        .file-upload-wrapper>input[type=file] {
            display: none ;
        }
        .file-selector {
            flex-basis: 400px;
            background: #ff0;
        }
        .upload-button {
            flex-basis: 100px;
            background: #4343fd;
            color: #fff ;
            text-align: center ;
            line-height: 50px;
        }

    </style>
</head>
<body>

    <div class="file-upload-wrapper">
        <input type="file">
        <div class="file-selector"></div>
        <div class="upload-button">上传</div>
    </div>

    <script type="text/javascript">
        const fs = document.querySelector( '.file-selector' );
        const input = document.querySelector( 'input[type=file]' );

        const customEventType = '暴击' ;

        input.addEventListener( customEventType , {
            handleEvent(e){
                console.log( e );
                console.log( e.type );
                // 获得事件目标(即发生'暴击'事件的元素)
                let t = e.target ;
                // 对于 <input type="file"> 元素来说可以通过调用 click 函数来触发点击事件
                t.click();
            }
        } , false );

        input.addEventListener( 'change' , {
            handleEvent(e){
                let t = e.target ;
                console.log( t.files );
                let filename = t.files[0].name ;
                fs.innerHTML = filename ;
            }
        } , false );

        // 为 fs 元素绑定 click 事件监听器
        fs.addEventListener( 'click' , {
            handleEvent( e ){
                console.log( e.target );
                // 创建自定义事件(用Event构造函数实现)
                let event = new Event( customEventType );
                // 将自定义事件(event)派发给指定的事件目标(input)
                input.dispatchEvent( event );
            }
        } , false);

        const customEventName = '我被青春撞了一下腰' ;
        window.addEventListener( customEventName , { 
            handleEvent(e){
                console.log( e.type );
                alert( e.type );
            }
         } , false );

         document.addEventListener( 'dblclick' , {
             handleEvent(){
                 let event = new Event( customEventName );
                 // 向 window 派发 event 事件
                 window.dispatchEvent( event );
             }
         } , false);
    </script>
    
</body>
</html>